﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <script src="~/Content/UI/js/mui.min.js"></script>
    <script src="~/Content/UI/js/mdui.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="~/Content/UI/css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Content/UI/css/mdui.min.css" />
    <link rel="stylesheet" href="~/Content/UI/css/nav.css" />
    <link rel="stylesheet" href="~/Assets/Plugs/layer_mobile/need/layer.css"/>
    
    <style>
        .mui-off-canvas-wrap .mui-bar {
            -webkit-box-shadow: 0 1px 6px #ccc;
            box-shadow: 0 1px 6px #ccc;
        }
        .mui-bar-nav {
            -webkit-box-shadow: 0 1px 6px #ccc;
            box-shadow: 0 1px 6px #ccc;
        }
    </style>
</head>
<body>
    <!-----悬浮按钮----->
        <div class="mdui-fab-wrapper" id="exampleFab" mdui-fab="{trigger: 'click'}">
            <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
                <!-- 默认显示的图标 -->
                <i class="mdui-icon material-icons">&#xe145;</i>

                <!-- 在拨号菜单开始打开时，平滑切换到该图标，若不需要切换图标，则可以省略该元素 -->
                <i class="mdui-icon mdui-fab-opened material-icons">&#xe254;</i>
            </button>
            <div class="mdui-fab-dial">
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink" onclick="history.go(-1);"><i class="mdui-icon material-icons">&#xe5cb;</i></button>
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red" id="order-button"><i class="mdui-icon material-icons">&#xe8cc;</i></button>
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange"><i class="mdui-icon material-icons">&#xe191;</i></button>
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue"><i class="mdui-icon material-icons">&#xe913;</i></button>
            </div>
        </div>
        <!-- 缩放式侧滑（类手机QQ） -->
        <!-- 侧滑导航根容器 -->
        <div class="mui-off-canvas-wrap mui-draggable mui-scalable">
            <!-- 菜单容器 -->
            <aside class="mui-off-canvas-left mui-transitioning" id="offCanvasSide">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <!-- 菜单具体展示内容 -->
                        <div class="title" style="width: 100%;">
                                    <a href="#" id="head">
                                        <img src="" class="img-responsive center-block head-circle" id="head_img"/>
                                    </a>
                                
                        </div>
                        <div class="mui-content" id="user_menu_login">
                            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" id="profile">个人中心</a>
                                </li>
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" id="order">当前预定</a>
                                </li>
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" id="logout" href="javascript:;">注销</a>
                                </li>
                            </ul>

                        </div>

                        <div class="mui-content element-invisible" id="user_menu_unlogin">
                            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="/Account/Login" id="login">去登陆</a>
                                </li>
                                
                            </ul>

                        </div>
                    </div>
                </div>
            </aside>
            <!-- 主页面容器 -->
            <div class="mui-inner-wrap mui-transitioning">
                <!-- 主页面标题 -->
                <header class="mui-bar mui-bar-nav mdui-shadow-5">
                    <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
                    <a class="mui-action-back mui-btn mui-btn-link mui-pull-right">
                        <i class="mui-icon mui-icon-person"></i>
                    </a>
                    <!--<div class="mui-title mui-search">
                         <input type="search" class="mui-input-clear" placeholder="">
                     </div>-->
                    <!--<h1 class="mui-title">借阅伴侣</h1>-->
                </header>


                <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
                    <div class="mui-scroll">
                        <!-- 主界面具体展示内容 -->
                        @RenderBody()



                    </div>
                </div>
            </div>
        </div>
    <script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Assets/Plugs/layer/layer.js"></script>
    <script src="~/Assets/Plugs/layer/extend/layer.ext.js"></script>
    <script src="~/Assets/Scripts/js.js"></script>
    <script src="~/Assets/Scripts/Msg.js"></script>
        <script type="text/javascript" charset="utf-8">
            document.addEventListener('touchstart', function (event) {
                // 判断默认行为是否可以被禁用
                if (event.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!event.defaultPrevented) {
                        event.preventDefault();
                    }
                }
            }, false);
            $(function () {
                document.getElementById('login').addEventListener('tap', function (event) {
                    self.location = "/account/login";
                },false);
            });
            mui.init({
                
                /*swipeBack: false,
            keyEventBind: {
                backbutton: false //关闭back按键监听
            },
            pullRefresh: {
                container: '#pullrefresh',
                up: {
                    contentrefresh: '正在加载...',
                    callback: pullupRefresh
                }
            }*/
            });

            var count = 0;
            /**
             * 上拉加载具体业务实现
             */
            function pullupRefresh() {
                setTimeout(function () {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    /*for (var i = cells.length, len = i + 20; i < len; i++) {
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '<a class="mui-navigate-right">社会-Item ' + (i + 1) + '</a>';
                        table.appendChild(li);
                    }*/
                }, 1000);
            }
            //获得slider插件对象
            var gallery = mui('.mui-slider');
            gallery.slider({
                interval: 4000//自动轮播周期，若为0则不自动播放，默认为0；
            });
            mui('#pullrefresh').scroll({
                indicators: true,
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
            mui('#pullrefresh').scroll();

            document.querySelector('.mui-off-canvas-wrap').addEventListener('shown', function (event) {
                if (typeof (localStorage.user) == 'undefined') {
                    $('#head').attr('href', '/Account/Login');
                    $('#head_img').attr('src', '/Content/UI/images/default.png');
                    //未登录，请先登录
                    $('#user_menu_login').remove();
                    
                } else {
                    var UID = localStorage.user;
                    $.ajax({
                        url: '/Index/GetUserHead',
                        dataType: 'Json',
                        type: 'POST',
                        data: { 'UID': UID },
                        success: function (data) {
                            $('#head').attr('href', '/Profile/MyProfile/?uid=' + UID);
                            $('#head_img').attr('src', data['head']);
                            $('#user_menu_unlogin').remove();
                            $('#profile').attr('href', '/Profile/MyProfile/?uid=' + UID);
                            $('#order').attr('href', '/Book/OrderList/?uid=' + UID);
                            var onc = "bp_showFrame('/book/orderlist?uid=" + UID +"','订单列表')";
                            $('#order-button').attr('onclick', onc);
                        }
                    });
                }
            })
            $(function () {
                if (typeof (localStorage.user) != 'undefined') {
                    var UID = localStorage.user;
                    var onc = "bp_showFrame('/book/orderlist?uid=" + UID + "','订单列表')";
                    $('#order-button').attr('onclick', onc);
                }
                document.getElementById('logout').addEventListener('tap', function (event) {
                    localStorage.removeItem('user');
                    $('#head').attr('href', '/Account/Login');
                    $('#head_img').attr('src', '/Content/UI/images/default.png');
                    //未登录，请先登录
                    $('#user_menu_login').remove();
                }, false);
                mui('.mui-table-view-cell').on('tap', '.mui-navigate-right', function () {
                    var href = this.getAttribute("href");
                    self.location = href;
                });
            });
        </script>

    <script>
            function bp_showFrame(url, title) {
                layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: 0.8,
                    area: ['380px', '90%'],
                    content: url //iframe的url
                }); 
                //layer.open({
                //    type: 1
                //    ,closeBtn: 1
                //    ,title: title
                //    , content: url
                //    , anim: 'up'
                //    , style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
                //});
            }
    </script>
</body>
</html>